<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .swiper {
            width: 500px;
            height: 400px;
            margin: auto;
            position: relative;
            overflow: hidden;
        }
        .swiper ul {
            /* 本身只有四张图  但是留5张图的位置 */
            width: 2500px;
            display: flex;
            position: absolute;
        }
        .swiper ul li {
            width: 500px;
            height: 400px;
            text-align: center;
            font-size: 50px;
            line-height: 400px;
            background-color: #f00;
        }
        .swiper span {
            width: 30px;
            height: 30px;
            background-color: rgba(0,0,0,0.5);
            color: #fff;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            line-height: 30px;
        }
        .swiper .next {
            right: 0;
        }

        .swiper ol {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .swiper ol li {
            width: 30px;
            height: 30px;
            background-color: orange;
            margin: 10px;
        }

        .swiper .active {
            background-color: #000;
        }
    </style>
</head>
<body>
    
    <div class="swiper" id="a">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>1</li>
        </ul>
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>

    <script src="../js/tools.js"></script>
    <script src="../js/move.js"></script>

    <script>

        // 无缝轮播
        //    把第一张图复制一份放在最后面


        //   控制播放第几张  index
        //   定时器         timer
        //   图片  
        //   小点
        //   左右切换

        //   方法
        //     自动播放   autoPlay

        //     绑定事件   


        function Swiper(ele , type ) {
            this.oBox = get(ele) ;
            // 找到装图片的大盒子
            this.oUl = this.oBox.querySelector('ul') ;
            // 找到图片
            this.oImgs = this.oBox.querySelectorAll('ul li') ;
            // 找到小点
            this.oDots = this.oBox.querySelectorAll('ol li') ;
            // 上
            this.oPrev = this.oBox.querySelector('.prev') ;
            this.oNext = this.oBox.querySelector('.next') ;
            // 控制播放第几张
            this.index = 0 ;
            this.timer = null ;

            // 获取图片的宽度
            this.w = this.oImgs[0].offsetWidth ;

            // 确认小点切换的事件类型
            this.type = type || 'click' ;

            // 自动播放
            this.autoPlay() ;

            // 绑定事件
            this.event()
        }


        Swiper.prototype.autoPlay = function() {
            this.timer = setInterval(() => {    // 使用箭头函数   this指向
                this.index++ ;
                // 对应的这张图片需要显示
                move({
                    ele : this.oUl ,
                    prop : 'left' ,
                    speed : 30 ,
                    end : - this.w * this.index  ,
                    cb : () => {
                        if(this.index === this.oImgs.length - 1) {
                            this.index = 0 ;
                            setCss(this.oUl , {
                                left : 0
                            })
                        } 
                    }
                })

                // 小点跟着移动
                this.moveDot();
            } , 2000)
        }

        Swiper.prototype.moveDot = function() {
            for(let i = 0 ; i < this.oDots.length ; i++) {
                this.oDots[i].classList.remove('active') ;
            }   
            if(this.index ===  this.oImgs.length - 1) {
                this.oDots[0].classList.add('active');
            } else {
                this.oDots[this.index].classList.add('active');
            }
            
        }



        Swiper.prototype.event = function() {

            // 页面失去焦点和获取焦点
            window.onblur = () => {
                clearInterval(this.timer) ;
            }

            window.onfocus = () => {
                this.autoPlay();
            }


            // 鼠标移入移出
            this.oBox.onmouseover = () => {
                clearInterval(this.timer) ;
            }

            this.oBox.onmouseout = () => {
                this.autoPlay();
            }

            // 小点切换
            for(let i = 0 ; i < this.oDots.length ; i++) {
                this.oDots[i].addEventListener(this.type , () => {
                    clearInterval(this.timer) ;
                    this.index = i ;
                    // 显示对应的图片
                    move({
                        ele : this.oUl ,
                        prop : 'left' ,
                        speed : 30 ,
                        end : - this.w * this.index  ,
                        cb : () => {
                            if(this.index === this.oImgs.length - 1) {
                                this.index = 0 ;
                                setCss(this.oUl , {
                                    left : 0
                                })
                            } 
                        }
                    })

                    // 小点跟着移动
                    this.moveDot();
                })
            }  
            
            // 上翻页
            this.oPrev.onclick = () => {
                clearInterval(this.timer) ;
                // 如果是第一张，就切换成最后一张 --- 实际上也是第一张
                if(this.index === 0) {
                    this.index = this.oImgs.length - 1 ;
                    setCss(this.oUl , {
                        left : - this.w * this.index + 'px'
                    })
                }
                this.index-- ;
                // 显示对应的图片
                move({
                    ele : this.oUl ,
                    prop : 'left' ,
                    speed : 30 ,
                    end : - this.w * this.index  ,
                    cb : () => {
                        if(this.index === this.oImgs.length - 1) {
                            this.index = 0 ;
                            setCss(this.oUl , {
                                left : 0
                            })
                        } 
                    }
                })

                // 小点跟着移动
                this.moveDot();
            }


            // 下翻页
            this.oNext.onclick = () => {
                clearInterval(this.timer) ;
                // 如果是最后一张(实际上就是第一张) , 切换到第一张
                if(this.index === this.oImgs.length - 1) {
                    this.index = 0 ;
                    setCss(this.oUl , {
                        left : 0
                    })
                }
                this.index++ ;
                 // 显示对应的图片
                 move({
                    ele : this.oUl ,
                    prop : 'left' ,
                    speed : 30 ,
                    end : - this.w * this.index  ,
                    cb : () => {
                        if(this.index === this.oImgs.length - 1) {
                            this.index = 0 ;
                            setCss(this.oUl , {
                                left : 0
                            })
                        } 
                    }
                })

                // 小点跟着移动
                this.moveDot();
            }
        }



        new Swiper('#a');

    </script>
</body>
</html>